<template>
    <div>
        <!-- gutter 属性来指定每一栏之间的间隔,默认间隔为 0 -->
        <el-row :gutter="10">
            <!-- 共24 分栏，使用span 属性我们就可以自由地组合布局 -->
            <el-col :span="6">
                <el-card>
                    <Detail title="总销售额" count="¥ 126560">
                        <template slot="charts">
                            <span>
                                周同比&nbsp;&nbsp;56.67%
                            </span>
                            <span>
                                日同比&nbsp;&nbsp;19.96%
                            </span>
                        </template>
                        <template slot="footer">
                            <span>日销售额￥ 12423</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <Detail title="访问量" count="88460">
                        <template slot="charts">
                            <BarCharts></BarCharts>
                        </template>
                        <template slot="footer">
                            <span>日访问量 1234</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <Detail title="支付笔数" count="88460">
                        <template slot="charts">
                            <LineCharts></LineCharts>
                        </template>
                        <template slot="footer">
                            <span>转换率64%</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <Detail title="运营活动效果" count="78%">
                        <template slot="charts">
                            <ProgressCharts></ProgressCharts>
                        </template>
                        <template slot="footer">
                            <span>转换率64%</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Detail from './Detail';
import BarCharts from './barCharts';
import LineCharts from './lineCharts';
import ProgressCharts from './progressCharts';
export default {
    name: 'Card',
    components: {
        Detail,BarCharts,LineCharts,ProgressCharts
    }

}
</script>

<style scoped></style>